<template>
    <div class="reCharge_page">

      <van-nav-bar
        :title="title"
        left-arrow @click-left="$router.back()"
      >
        <template #right>
          <van-icon  @click="searchType = !searchType" name="search" size="20" style="margin-right: 20px; "/>
          <van-icon
            name="ellipsis"
            size="18"
            @click="showOverlay = true"
          />
        </template>
      </van-nav-bar>
      <van-overlay
        :show="showOverlay"
        @click="showOverlay = false"
        class="over_layer"
      >
        <van-cell-group class="layer">
          <van-cell value="好友列表" @click="listFriend()"/>
          <van-cell value="好友权限" @click="limitFriend()"/>
          <van-cell value="黑名单" @click="blacklist()"/>
        </van-cell-group>
      </van-overlay>
<van-search v-show="searchType == true" v-model="value" placeholder="请输入好友名称" />
        <div class="list_content" v-for="(item,index) in friedList" :key='index'>
          <div @click="chat(item,index)" class='list'>
            <div class="left">
              <img :src="item.userimage" style='width:100%;height:100%' alt="">
            </div>
            <div class='right'>
              <div class="up">{{item.name}}</div>
              <!-- <div class="down">{{item.id}}</div> -->
            </div>
          </div>
        </div>
    </div>
</template>

<script>

// let scan = null;
  export default {
    name: 'reCharge',
    data(){
      return {
        title:'好友列表',
        smtype:true,
        searchType:false,
        showOverlay:false,
        userInfo:'',
        friedList:[]
      }
    },
    components:{
     
    },
    created(){
      let userInfo = localStorage.getItem('userInfo')
      console.log(JSON.parse(userInfo))
      this.userInfo = JSON.parse(userInfo)
      this.getAddFriendList()
    },
    methods:{
      limitFriend(){
        this.title = '好友权限列表'
      },
      blacklist(){
        this.title = '黑名单列表'
        let params = {
          addUserId:'ab4ff8be-1003-4dae-8c1c-6d876b30fc04',   //当前用户id
          // addedUserId:''
        }
            this.$api.user.SetFirendBlackList(params).then(res => {
              if (res.code === 200) {
                console.log(res)
                console.log(JSON.parse(res.data))
                // this.friedList = JSON.parse(res.data)
              }
          })
      },
      listFriend(){
        this.title = '好友列表'
      },

       goBack(){
           this.$router.go('-1')
       },
       getAddFriendList(){
            let params = {
                userId:this.userInfo.id   //当前用户id
            }
            this.$api.user.GetFirendList(params).then(res => {
              if (res.code === 200) {
                console.log(res)
                console.log(JSON.parse(res.data))
                this.friedList = JSON.parse(res.data)
              }
          })
       },
       chat(data,i){
          console.log(data)
          // data.isRead = 0
          let newData = {
            MessagePage:'person',
            Name: data.name,
            UserId: data.userid,
            UserImage: data.userimage
          }

          this.$router.push({name: 'chat', params: newData})
          // this.$router.push('chat')
        },
    
       
        
    },
     

  }
</script>

<style scoped lang='scss'>
  .title{
    height: 300px;
    width: 300px;
    text-align: left;
    font-size: 18px;
    margin: 20px auto 0;
  }
  .over_layer {
      margin-top: 46px;
      height: 100%;
      .layer {
        width: 40%;
        font-size: 14px;
        position: absolute;
        right: 0;
        z-index: 2;
        color:#0091ff;
      }
    }
  .list_content{
    width:100%;
    background:#fff;
  }
  .list{
    padding:10px;
    display: flex;
    border-bottom:1px solid #ccc;
    .left{
      width:40px;
      height:40px;
      border-radius: 5px;
      margin-right: 10px;
    }
    .right{
      .up{
        font-size:16px;
      }
    }
  }
</style>
